<template>
  <div>
    <Row :space="10">
      <Cell width="5">
        <div class="h-panel">
          <div class="h-panel-body">
            <div class="h-input-group">
              <Input type="text" placeholder="连接地址" :value="url" />
              <button class="h-btn h-btn-blue h-btn-m" @click="connect">
                连接
              </button>
            </div>
          </div>
        </div>
        <p></p>
        <div class="h-panel">
          <div class="h-panel-bar">
            <span class="h-panel-title">分组管理</span>
          </div>
          <div class="h-panel-body">
            <Form ref="form" :validOnChange="true" :showErrorTip="true" labelPosition="left" :labelWidth="110" :model="model">
              <div class="h-input-group">
                <TreePicker ref="treepicker" v-model="model.groupId" :option="param" />
                <Button color="yellow" @click="deleteGroup">删除</Button>
              </div>
              <p></p>
              <div class="h-input-group">
                <Input type="text" placeholder="新建子分组" v-model="groupName" />
                <Button color="green" @click="createGroup">创建</Button>
              </div>
            </Form>
          </div>
        </div>
      </Cell>
      <Cell width="14">
        <div class="h-panel">
          <div class="h-panel-bar">
            <span class="h-panel-title">SQL编辑器</span>
          </div>
          <div class="h-panel-body">
            <div class="h-input-group">
              <Select :datas="groupList"></Select>
              <Button color="yellow">删除</Button>
            </div>
            <p></p>
            <div class="h-input-group">
              <Input type="text" placeholder="接口编号" />
              &nbsp;&nbsp;&nbsp;&nbsp;
              <Input type="text" placeholder="新建名称" />
              <Button color="blue">保存</Button>
            </div>
            <p></p>
            <p>
              SQL语句
              <Textarea v-model="model.sqlContent" rows="18" style="width:100%"></Textarea>
            </p>
            <p>
              查询条件
              <TagInput v-model="model.wheres" style="width:100%"></TagInput>
            </p>
          </div>
        </div>
      </Cell>
      <Cell width="5">
        <div class="h-panel">
          <div class="h-panel-bar">
            <span class="h-panel-title">数据库表</span>
            <span class="h-panel-right"><a>刷新</a></span>
          </div>
          <div class="h-panel-body">
            <p>content</p>
          </div>
        </div>
      </Cell>
    </Row>
  </div>
</template>

<script>
export default {
  mounted() { },
  components: {},
  data() {
    return {
      url: "http://localhost:9898",
      param: {
        keyName: "id",
        parentName: "parentId",
        titleName: "groupName",
        dataMode: "list",
        datas: []
      },
      model: {
        groupId: "",
        sqlContent: "",
        wheres: []
      },
      groupName: "",
      groupList: []
    };
  },
  methods: {
    connect() {
      this.getGroupInfo();
    },
    getGroupInfo() {
      this.$axios.post(this.url + "/api/group/list", {}).then(res => {
        let data = res.data.data;
        this.param.datas = data;
      });
    },
    deleteGroup() {
      this.$axios
        .delete(this.url + "/api/group/delete/" + this.model.groupId, {})
        .then(res => {
          if (res.data.code == 200) {
            this.getGroupInfo();
          }
          this.$Message.info(res.data.msg);
        });
    },
    createGroup() {
      this.$axios
        .post(this.url + "/api/group/add", {
          groupName: this.groupName,
          parentId: this.model.groupId
        })
        .then(res => {
          if (res.data.code == 200) {
            this.getGroupInfo();
          }
          this.$Message.info(res.data.msg);
        });
    },
    getTableInfo() { },
    getSqlList() { }
  }
};
</script>
